<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>KJD</title>
</head>
<style>
    body {
        margin: 0;
        padding: 0;
    }



    #slider {
        margin: auto;
        width: 100%;
        height: 100%;
        position: relative;
        overflow: hidden;
    }

    #slider-content {
        height: 100%;
        background-color: brown;
        width: auto;
        display: flex;
        position: absolute;
        left: 0;
    }
</style>

<body>
    <div id="slider">
        <div id="slider-content">
            <img src="https://www.wanmei.com/resources/jpg/20240119/100817056351139840.jpg" alt="">
            <img src="https://www.wanmei.com/resources/jpg/20240111/100817049425754790.jpg" alt="">
            <img src="https://www.wanmei.com/resources/jpg/20231229/100817038154338390.jpg" alt="">
            <img src="https://www.wanmei.com/resources/jpg/211104/10081636021684851.jpg" alt="">
        </div>
    </div>
</body>
<script>
    window.onload = function () {
        function on(el, event, cal) {
            el.addEventListener(event, cal);
        }
        function off(el, event, cal) {
            el.removeEventListener(event, cal)
        }
        let slider = document.getElementById("slider");
        slider.style.height = this.innerHeight + "px";
        slider.style.width = this.innerWidth + "px";
        let sliderContent = document.getElementById("slider-content");
        let def_num = 80;
        let start_x = 0;
        let g_x = 0;
        let e_x = 0;
        let b = undefined;
        let time = undefined;
        let dur = undefined;
        function is_left_key(e) {
            return e.which === 1;
        }
        function start(e) {
            if (!is_left_key(e)) { return }
            let x = e.clientX || e.touches[0].clientX;
            start_x = x;
            time = new Date().getTime();
            on(document, "mousemove", move);
            on(slider, "touchmove", move);
            on(document, "mouseup", end)
            on(slider, "touchend", end)
            css(sliderContent, {
                cursor: "grab"
            });
        }

        function move(e) {
            e.preventDefault();
            let x = e.clientX || e.touches[0].clientX;
            g_x = x - start_x + e_x;
            css(sliderContent, {
                transform: `translate3d(${g_x}px,0px,0px)`,
                transitionDuration: "0ms"
            });
        }
        function is_equal(a, b) {
            return a === b;
        }
        function is_big(a, b) {
            return a > b;
        }
        function end(e) {
            let x = e.clientX || e.changedTouches[0].clientX;
            dur = Math.abs(time - (new Date().getTime()));
            e_x = g_x;
            let offset_x = parseInt((x - start_x) / dur) * def_num;
            animate(sliderContent, e_x, e_x + offset_x, 0);
            e_x = g_x + offset_x;
            off(document, "mousemove", move);
            off(slider, "touchmove", move);
            off(document, "mouseup", end);
            off(slider, "touchend", end);
            css(sliderContent, {
                cursor: "auto"
            });
            if (is_bound()) {
                css(sliderContent, {
                    transform: `translate3d(0px,0px,0px)`,
                    transitionDuration: "300ms"
                });
                e_x = 0;
            }
        }
        function is_bound(){
            return css(sliderContent, "left") > 0;
        }
        function css(el, prop) {
            if (typeof prop === "object" && prop instanceof Object) {
                for (let k in prop) {
                    el.style[k] = prop[k];
                }
            } else if (typeof prop === 'string' && prop.trim().length !== 0) {
                return el.getBoundingClientRect()[prop];
            } else {
                return null;
            }
        }

        /**
         * @el 元素
         * @s 开始坐标
         * @e 结束坐标
         * @a 加速度
         **/
        function animate(el, s, e) {
            if (is_equal(s === e)) { return };
            css(el, {
                transform: `translate3d(${s}px,0px,0px)`,
                transitionDuration: "300ms",
            });
            css(el, {
                transform: `translate3d(${e}px,0px,0px)`,
                transitionDuration: "300ms",
            });
        }
        on(slider, "mousedown", start);
        on(slider, "touchstart", start);
        on(this, "wheel", (e) => {
            if(is_bound()){
                return;
            }
            if (e.deltaY < 0) {
                e_x+=def_num;
            } else {
                e_x-=def_num;
            }
            css(sliderContent, {
                transform: `translate3d(${e_x}px,0px,0px)`,
                transitionDuration: "300ms"
            });
        })
    }
</script>

</html>